<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字围绕浮动元素巧妙运用</title>
    <style>
     ul li {
         position: relative;
         float: left;
         list-style: none;
         width: 150px;
         height: 200px;
         border: 1px solid deeppink;
         margin-left: -1px;
     }
     /* 第一种解决方案：如果盒子没有定位，则鼠标经过添加相对定位即可 */
     /* ul li:hover {
         border: 1px solid skyblue;
     } */

     /* 第二种解决方案：如果li都有定位，则利用 z-index 提高层级 */
     ul li:hover {
         z-index: 1;
         border: 1px solid skyblue;
     }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>